<template>
  <el-form :model="timeForm">
    <el-form-item label="服务时间段:">
      <el-col :span="9">
        <el-time-select
          v-model="timeForm.startTime"
          placeholder="开始时间"
          :disabled="disabled"
          :picker-options="{
            start: '08:00',
            end: '22:00',
            maxTime:timeForm.endTime,
            minTime:minTime
          }"
          value-format="HH:mm"
          format="HH:mm"
        />
        &nbsp;&nbsp;~&nbsp;&nbsp;
        <el-time-select
          v-model="timeForm.endTime"
          placeholder="结束时间"
          :disabled="disabled"
          :picker-options="{
            start: '08:00',
            end: '22:00',
            minTime:timeForm.startTime
          }"
        />
      </el-col>
      <el-col :span="4" class="el-col-offset-1">
        <el-link type="danger" @click="deleteItem">删除时间段</el-link>
      </el-col>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'TimeInterval',
  props: {
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      timeForm: {
        startTime: '',
        endTime: ''
      },
      minTime: null,
      disabled: false
    }
  },
  methods: {
    deleteItem() {
      const vm = this
      vm.$emit('delete', vm.index)
    },
    getData() {
      const vm = this
      return vm.timeForm
    },
    setMinTime(minTime) {
      this.minTime = minTime
    },
    setDisabled(disabled) {
      this.disabled = disabled
    }
  }
}
</script>

<style scoped>
</style>
